import React from 'react';

const RenderPropsDemo = () => {
    return (
        <div style={{padding: 20}}>
            <p>组件插槽，使用render属性传递子组件，父组件就可以给子组件传递内容。</p>
            <p>这样就可以自定义子组件的内容了，不用把子组件和父组件强耦合在一起了。</p>
            <A render={(username) => <B username={username}/>}/>
        </div>
    );
};

const A = (props) => {

    const [username] = React.useState('小程序商城');

    return (
        <div style={{backgroundColor: "burlywood", padding: 20}}>
            组件A，给子组件传递参数：username={username}
            {props.render(username)}
        </div>
    );
};

const B = (props) => {
    return (
        <div style={{backgroundColor: "aquamarine", padding: 20}}>
            组件B，接收到参数，name={props.username}
        </div>
    );
};

export default RenderPropsDemo;
